import { memo, FC, useRef, useEffect } from 'react'
import { Modal, Form, Input, Select, message } from 'antd'
import type { FormInstance } from 'antd'
import {
  InstitutionListType,
  OrganizationModelState,
  connect,
  Dispatch
} from 'umi'
const { Option } = Select

interface IProps {
  visible: boolean
  hide: () => void
  record: InstitutionListType | undefined
  update: () => void
  dispatch: Dispatch
  organizationModel: OrganizationModelState
}
interface FormValues {
  [name: string]: any
}
const EditOrganization: FC<IProps> = ({
  visible,
  hide,
  record,
  dispatch,
  update,
  organizationModel
}) => {
  const formRef = useRef<FormInstance>(null)
  const { gradeList, areaList, schoolInfo } = organizationModel
  const handleOk = () => {
    formRef.current?.submit()
  }
  const handleCancel = () => {
    hide()
    formRef.current?.resetFields()
  }
  const onFinish = (values: FormValues) => {
    dispatch({
      type: 'organizationModel/function_saveSchoolInfo',
      payload: { code: record!.code, ...values },
      callback: (response) => {
        if (response.code === 200) {
          message.success('编辑成功')
          handleCancel()
          update()
        }
      }
    })
  }

  const getAreaInfo = () => {
    dispatch({
      type: 'organizationModel/function_getAreaInfo',
      payload: {}
    })
  }

  const getSchoolInfoByCode = () => {
    dispatch({
      type: 'organizationModel/function_getSchoolInfoByCode',
      payload: { code: record!.code }
    })
  }
  useEffect(() => {
    if (visible) {
      getAreaInfo()
      getSchoolInfoByCode()
    }
  }, [visible])

  useEffect(() => {
    formRef.current?.setFieldsValue(schoolInfo)
    formRef.current?.setFieldsValue({
      grade: gradeList.find((item) => item.dictValue === record!.grade)?.dictKey
    })
  }, [schoolInfo])
  return (
    <>
      <Modal
        title="编辑学校"
        open={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        width="40%"
        okText="确认"
        cancelText="取消"
        maskClosable={false}
      >
        <Form
          name="basic"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          autoComplete="off"
          initialValues={{ status: '1' }}
          ref={formRef}
          onFinish={onFinish}
        >
          <Form.Item label="学段" name="grade">
            <Select placeholder="请选择所属学段" style={{ width: '100%' }}>
              {gradeList.map((item) => (
                <Option value={item.dictKey} key={item.dictKey}>
                  {item.dictValue}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="学校名称" name="name">
            <Input placeholder="请输入机构名称" />
          </Form.Item>
          <Form.Item label="所属区县" name="areaCode">
            <Select placeholder="请选择所属区县" style={{ width: '100%' }}>
              {areaList.map((item) => (
                <Option value={item.code} key={item.code}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}

const mapStateToProps = ({
  organizationModel
}: {
  organizationModel: OrganizationModelState
}) => {
  return {
    organizationModel
  }
}

export default connect(mapStateToProps)(memo(EditOrganization))
